<template>
	<div class="maxbox">
		

	<div class="danji">
		<div class="head">
			<h3>当季目的地</h3>
			<p class="p1">
				你朋友圈的旅行内容，我们包了
			</p>
			<p class="p2">
				更多<i class="iconfont">&#xe633;</i>
			</p>
		</div>
		<ul class="title-ul">
			<!-- 当点击的时候，标题的默认效果需要切换，选项卡之间也需要切换 -->
			<li v-for="item in tabs" :key="item.id" :class="{ 'default' : iscur===item.id}" @click="iscur = item.id">
				{{item.name}}
			</li>
		</ul>
		<DanjiTab1 v-if="iscur === 1"></DanjiTab1>
		<DanjiTab2 v-if="iscur === 2"></DanjiTab2>
	</div>
	</div>
</template>

<script>
	import DanjiTab1 from './DanjiTab1.vue'
	import DanjiTab2 from './DanjiTab2.vue'
	export default{
		name:'Danji',
		components:{
			DanjiTab1,
			DanjiTab2
		},
		data(){
			return{
				tabs:[
					{id:1,name:'国内'},
					{id:2,name:'出境'}
				],
				iscur:1, //默认选中第一个标题以及第一个组件
			}
		}
	}
</script>

<style scoped>
	.maxbox{
		width: 100%;
		height: 9rem;
		background-color: white;
		border-radius: 0.2rem;
		margin-top: -0.2rem;
		margin-bottom: 0.2rem ;
	}
	.danji .head{
		width: 100%;
		height: 1.2rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}
	.danji .head h3{
		font-size: 0.45rem;
		padding-right: 0.3rem;
		font-weight: bold;
		text-indent: 0.4rem;
	}
	.danji .head .p1{
		color: #ffb551;
		height: 0.4rem;
		width: 50%;
		text-align: center;
		border-radius: 0.1rem;
		line-height: 0.4rem;
		background-color: #fff3ea;
	}
	.danji .head .p2{
		flex: 1;
		font-size: 0.38rem;
		text-align: right;
	}
	.danji .head .p2 i{
		font-size: 0.1rem;
		font-weight: bold;
		padding-right: 0.1rem;
	}
	.danji{
		width: 90%;
		margin: 0.5rem auto;
		height: 9.3rem;
	}
	.danji .title-ul{
		height: 1.17rem;
		width: 100%;
		border-radius: 0.3rem;
		display: flex;
		align-items: center;
	}
	.danji .title-ul li{
		width: 23%;
		text-align: center;
		border-radius: 0.6rem;
		line-height: 0.8rem;
		font-size: 0.4rem;
		position: relative;
		background-color: white;
		color: #666666;
		margin-right: 0.4rem;
		border: 1px solid #c5c5c5;
	}
	.danji .title-ul .default{
		color: #e6ac00;
		font-size: 0.4rem;
		font-weight: bold;
		box-shadow: 0 0 0.12rem 0 rgb(125 125 125 / 25%)
	}
</style>
